<template>
	<view class="chat">
		<u-notice-bar :text="text1" mode="closable" speed="100" url="/pages/componentsB/tag/tag"></u-notice-bar>
		<!-- <navigator url="/pages/mine/vip">{{this.problem}}</navigator> -->
		<view class="chat-item">
			<u-transition :show="true" mode="fade-left">
				<view class="chat-item__left u-flex">
					<u-avatar :src="chatInfo.image" shape="square"></u-avatar>
					<view class="chat-item__left-right">
						<view class="chat-item__left-name">{{ chatInfo.title }}</view>
						<view class="chat-item__left-bottom">
							<view class="chat-item__left-message">{{ chatInfo.message }}</view>
						</view>
					</view>
				</view>
			</u-transition>
		</view>
		<view class="hot">
			<view class="hot-header">
				<view class="">
					<u-icon
						name=""
						color=""
						label="热门提问"
					></u-icon>
				</view>
				<view class="" @click="update()"><u-icon name="reload" labelSize="28rpx" label="换一批"></u-icon></view>
			</view>
			<view class="hot-content">
				<view class="alert" style="margin-bottom: 10rpx;" v-for="(item, index) in queList" :key="index" @click.stop="send(item)">{{ item.name }}</view>
			</view>
		</view>
		<u-divider text="查看更多" :dashed="true" @click="popupType = 1;show = true;"></u-divider>
		<view class="chat-item" v-for="(item, index) in chat" :key="index">
			<u-transition :show="true" mode="fade-right" v-if="item.problem">
				<view class="chat-item__right">
					<view class="" style="margin-right: 20rpx;">
						<view class="chat-item__right-name">{{ userInfo.nickname ? userInfo.nickname : '匿名' }}</view>
						<view class="">
							<view class="chat-item__right-message" style="margin-top: 8rpx;" @longtap="copy(item.problem)">
								<!-- <chat-right :title="item.problem " /> -->
								{{ item.problem }}
							</view>
						</view>
					</view>
					<u-avatar shape="square" :src="userInfo.avatar" :mp-avatar="true"></u-avatar>
				</view>
			</u-transition>
			<u-transition :show="true" mode="fade-left">
				<view class="chat-item__left u-flex">
					<u-avatar :src="chatInfo.image" shape="square"></u-avatar>
					<view class="chat-item__left-right">
						<view class="chat-item__left-name">{{ chatInfo.title }}</view>
						<view class="chat-item__left-bottom">
							<view class="chat-item__left-message" @longtap="copy(item.answer)">
								<text v-show="item.answer == 'error'">网路错误</text>
								<template v-if="imgType == 7">
									<text v-show="item.answer != 'error'">
										<!-- <chat-right :title="item.answer || '思考中...'" @setCopyShow="e => setCopyShow(e, index, item.answer)" />
										<text v-if="item.answer"></text> -->
										<text v-if="!item.answer">思考中...</text>
										<template v-else>
											<u-image :src="item.answer" width="400rpx" height="400rpx" mode="widthFix"></u-image>
										</template>
									</text>
								</template>
								<template v-else>
									<text v-show="item.answer != 'error'">
										<chat-right :title="item.answer || '思考中...'" @setCopyShow="e => setCopyShow(e, index, item.answer)" />
									</text>
								</template>
							</view>
							<u-loading-icon v-show="item.answer == ''"></u-loading-icon>
							<u-icon v-show="item.answer == 'error'" name="error"></u-icon>
							<view style="margin-top:auto;" v-if="item.capyShow">
								<u-icon v-show="item.answer && item.answer != error" @tap="copy(item.answer)" name="file-text"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</u-transition>
		</view>
		<view class="seize" style="height: 280rpx"></view>
		<view class="send">
			<!-- <view class="" class="" @click="popupType = 2;show = true;">
				<u-icon name="grid" color="#5983F3" size="32"></u-icon>
			</view> -->
			<view class="input">
				<u-input style="border: none;" placeholder="你想和我聊点什么呢？" border="surround" v-model="problem"></u-input>
			</view>
			<!-- <u-button color="#f5f6fb" :customStyle="{ backgroundColor: '#505673' }" text="发送" @tap="getAnswer"></u-button> -->
			<image src="/static/img/send-btn.png" style="width: 80rpx;height: 80rpx;" mode="widthFix"  @tap="getAnswer"></image>
		</view>

		<u-popup round="10" :show="show" @close="close" @open="open" mode="bottom">
			<view style="padding: 30rpx 0;">
				<view v-if="popupType == 1">
					<view class="" style="text-align: center;font-size: 42rpx;font-weight: bold;margin-bottom: 10rpx;">热门提问</view>
					<view class="tag">
						<view style="width: 45%;padding: 15rpx;text-align: center;" v-for="(item, index) in chatData" @click="cahtType(index)">
							<u-button :type="item.checked ? 'primary' : 'info'" :text="item.title"></u-button>
						</view>
					</view>
					<u-line margin="30rpx 0"></u-line>
					<view class="a" style="padding: 0 30rpx;">
						<view class="alert" style="margin-bottom: 10rpx;" v-for="(item, index) in indexList" :key="index" @click.stop="send(item)">{{ item.name }}</view>
					</view>
				</view>
				<view style="min-height: 300rpx;" v-else>
					<view class="" style="text-align: center;font-size: 42rpx;font-weight: bold;margin-bottom: 10rpx;">我是新一代AI组理</view>
					<view style="text-align: center;font-size: 24rpx;">
						快来和我聊天吧！！！
					</view>
					<view class="ai">
						<view class="" style="flex: 1;text-align: center;" v-for="(item,index) in aiData" @click="selectModel(item.type)">
							<view class="">
								<image :src="`/static/img//img-${index + 1}.png`" style="width: 100rpx;height: 10rpx;" mode="widthFix"></image>
							</view>
							<view class="ai-title">
								{{item.title}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
import chatMixin from '../../mixins/chat.js';

import chatData from '../common/common.js';

	import {
		getUserInfo,
		topicList
	} from '@/common/api.js'
	
export default {
	mixins: [chatMixin],
	data() {
		return {
			popupType:1,
			problem: '',
			imgType: '1',
			title: '',
			text1: '由于近期访问人数过多，接口响应延迟，如AI一直无响应，请退出重试',
			type: 'chat',

			show: false,
			chatData: [],
			indexList: [],
			urls: [],
			queList: [],
			chatInfo: {},
			
			modelType:"modelType",
			aiData:[{
				'title':'通用性',
				'type':'modelType'
			},{
				'title':'翻译',
				'type':'modelType2'
			},{
				'title':'AI画图',
				'type':'modelType3'
			}],
			
			user_find_num:0,
		};
	},
	computed: {
		userInfo() {
			return this.$store.state.$userInfo;
		}
	},
	onShow() {
		this.imgType = this.$store.state.$type;
		this.update();
	},
	onLoad(e) {
		this.loadmore();
		let token = uni.getStorageSync('token');
		if(token) this.initData();
	},

	methods: {
		initData() {
			getUserInfo().then(res => {
				console.log(res);
				this.user_find_num = res.user_find_num
			})
		},
		selectModel(type) {
			this.modelType = type;
			this.show = false;
		},
		send(v) {
			this.problem = v.name;
			this.show = false;
		},
		random(arr) {
			return arr
				.sort((x, y) => {
					return Math.random() > 0.5 ? -1 : 1;
				})
				.slice(0, 3);
		},
		update() {
			let index = Number(this.imgType) - 1;
			topicList().then(res => {
				this.chatData = res.map((v, i) => {
					v.checked = false;
					return v;
				});
				this.chatInfo = this.chatData[index];
							console.log('this.chatInfo',this.chatInfo);
				this.chatData[index].checked = true;
				this.indexList = this.chatData[index].queList;
				this.queList = this.random(this.indexList);
				console.log(this.queList);
			})
		},
		cahtType(index) {
			this.chatData = this.chatData.map((v, i) => {
				v.checked = false;
				if (index == i) v.checked = true;
				return v;
			});
			// this.imgType = index + 1;
			this.indexList = this.chatData[index].queList;
			console.log('this.chatInfo', this.chatInfo);
		},
		setCopyShow(e, index, v) {
			this.chat[index].capyShow = v && e ? true : false;
		},
		open() {},
		close() {
			this.show = false;
			// console.log('close');
		},
		scrolltolower() {
			console.log('scrolltolower');
			this.loadmore();
		},
		loadmore() {
			console.log('this.indexList', this.indexList);
		}
	}
};
</script>

<style lang="scss" scoped>
.chat {
	padding: 20rpx;
	box-sizing: border-box;

	&-item {
		&__left {
			display: flex;
			margin-top: 20rpx;

			&-right {
				margin-left: 20rpx;
			}

			&-name {
				font-size: 24rpx;
			}

			&-message {
				margin-top: 10rpx;
				background: #f5f6fb;
				padding: 20rpx;
				border-radius: 10rpx;
				font-size: 28rpx;
				color: #505673;
				margin-right: 20rpx;
			}

			&-bottom {
				display: flex;
			}
		}

		&__right {
			display: flex;
			margin-top: 20rpx;
			justify-content: flex-end;
			
			&-name {
				font-size: 24rpx;
				text-align: end;
			
			}

			&-left {
				margin-right: 20rpx;
			}

			&-message {
				background: #5983f3;
				padding: 20rpx;
				border-radius: 10rpx;
				font-size: 28rpx;
				color: #fff;
			}
		}
	}
}

.send {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	background: #fff;
	position: fixed;
	// height: 280rpx;
	bottom: var(--window-bottom, 0);
	left: 0;
	width: 100%;
	padding: 20rpx;
	box-sizing: border-box;
	justify-content: space-between;

	.input {
		width: 85%;
		// height: 56rpx;
		margin: 0 10rpx;
		background-color: #f5f6fb;
		border-radius: 50rpx;
	}

	.u-button {
		margin-left: 20rpx;
		width: 100rpx;
		height: 80rpx;
	}
}

.hot {
	.hot-header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 30rpx 0;
		font-size: 28rpx;
	}
}
.tag {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
}

.a {
	height: 500rpx;
	overflow-y: auto;
}

.alert {
	background-color: #f5f6fb;
	color: #5983f3;
	font-size: 28rpx;
	font-weight: bold;
	padding: 16rpx 20rpx;
	border-radius: 10rpx;
	margin-bottom: 10rpx;
}

.alert:last-child {
	margin: 0;
}

.ai {
	display: flex;
	flex-direction: row;
	margin-top: 60rpx;
	
	.ai-title {
		text-align: center;
		color: #5983F3;
		font-size: 24rpx;
		margin-top: 10rpx;
	}
}
</style>
